import {
  BodyClasses,
  MODULE_CONFIG,
  PROJECT_PREFIX,
} from '../../types/constants'
import { StylesService } from '../../types/constants/styles'

export function styles(className: string): string {
  return `
    .${className} {
      all: initial !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 1999 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      height: ${MODULE_CONFIG.COMPONENTS.navbar.height} !important;
      padding: 0 24px !important;
      background-color: var(--${PROJECT_PREFIX}-theme-navbar-bg) !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
      transition: all 0.3s ease !important;
      
      /* 折叠状态样式 */
      &.${BodyClasses.IS_COLLAPSED} {
        top: 0 !important;
        left: unset !important;
        transform: translateY(0) !important;
        width: fit-content !important;
        padding: 0 !important;
        background-color: transparent !important;
        
        .navbar-content {
          display: none !important;
        }
        
        .navbar-collapse-toggle {
          display: flex !important;
          margin: 0 !important;
          transform: rotate(0) !important;
        }
      }
      
      &.${BodyClasses.MOBILE_EXPANDED} {
        position: relative !important;
        
        .nav-container {
          display: flex !important;
          position: absolute !important;
          top: 100% !important;
          left: 0 !important;
          height: auto !important;
          width: 100% !important;
          background-color: var(--${PROJECT_PREFIX}-theme-navbar-bg) !important;
          border-top: 1px solid var(--${PROJECT_PREFIX}-theme-code-toolbar-divider) !important;
          
          .nav-item {
            padding: 12px 0 0 0 !important;
            flex-direction: column !important;
            width: 100% !important;
            
            &:not(:has(.nav-dropdown)) {
              padding-right: 24px !important;
            }
            
            &:hover .nav-dropdown {
              display: none !important;
            }
            
            &.active {
              border-bottom: unset !important;
            }
            
            .nav-item-link {
              padding-bottom: 12px !important;
            }
            
            .nav-dropdown.${BodyClasses.IS_EXPANDED} {
              position: relative !important;
              display: flex !important;
              flex-direction: column !important;
              align-items: center !important;
              min-width: 100% !important;
              border-radius: 0 !important;
            }
          }
        }
      }
      
      .navbar-content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 1 !important;
        transition: opacity 0.3s ease, transform 0.3s ease !important;
        height: 100% !important;
      }

      /* 品牌样式 */
      .brand-container {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        cursor: pointer !important;

        .brand-logo {
          width: 32px !important;
          height: 32px !important;
          object-fit: contain !important;
        }

        .brand-name {
          font-size: 18px !important;
          font-weight: 600 !important;
          color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
          white-space: nowrap !important;
          
          @media (max-width: 768px) {
            font-size: 16px !important;
          }
        }
      }

      /* 导航菜单容器 */
      .nav-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        
        @media (max-width: 768px) {
          flex-direction: column !important;
          display: none !important;
        }

        .nav-item {
          position: relative !important;
          display: flex !important;
          align-items: center !important;
          height: 100% !important;
          padding: 0 16px !important;
          cursor: pointer !important;
          transition: all 0.2s ease !important;
          border-bottom: 2px solid transparent !important;

          &.active {
            border-bottom-color: var(--${PROJECT_PREFIX}-theme-primary) !important;
            
            .nav-item-link {
              color: var(--${PROJECT_PREFIX}-theme-navbar-active-text) !important;
            }
          }

          .nav-item-link {
            display: flex !important;
            align-items: center !important;
            gap: 8px !important;
            height: 100% !important;
            color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
            text-decoration: none !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            white-space: nowrap !important;

            &:hover {
              color: var(--${PROJECT_PREFIX}-theme-navbar-hover-text) !important;
            }
            
            @media (max-width: 768px) {
              font-size: 15px !important;
            }
          }

          .nav-item-icon {
            width: 16px !important;
            height: 16px !important;
          }

          &:hover .nav-dropdown {
            display: block !important;
          }
        }

        /* 下拉菜单样式 */
        .nav-dropdown {
          display: none !important;
          position: absolute !important;
          top: 100% !important;
          left: 0 !important;
          min-width: 180px !important;
          padding: 8px 0 !important;
          background-color: var(--${PROJECT_PREFIX}-theme-navbar-dropdown-bg) !important;
          border-radius: 4px !important;
          z-index: 1001 !important;

          .nav-dropdown-item {
            margin: 0 !important;
            color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
            font-size: 14px !important;
            cursor: pointer !important;
            transition: all 0.3s ease !important;
            list-style: none !important;

            &:hover {
              background-color: var(--${PROJECT_PREFIX}-theme-navbar-dropdown-hover-bg) !important;
              color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
              a {
                color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
              }
            }

            &.disabled {
              opacity: 0.5 !important;
              cursor: not-allowed !important;
            }
            
            a {
              display: block !important;
              padding: 8px 16px 8px 28px !important;
              ${StylesService.getInstance().link.navbar}
            }
          }
        }
      }

      /* 用户菜单样式 */
      .user-container {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        cursor: pointer !important;
        height: 100% !important;
        position: relative;
        
        .user-avatar-link {
           display: inline-block !important;
           border-radius: 50% !important;
           transition: transform 0.3s ease !important;

           .user-avatar {
              width: 32px !important;
              height: 32px !important;
              object-fit: cover !important;
              border-radius: 50% !important;
           }
        }

        .user-name {
          font-size: 14px !important;
          color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
          white-space: nowrap !important;
          
          @media (max-width: 768px) {
            font-size: 15px !important;
          }
        }
        
        .nav-item-icon {
          width: 16px !important;
          height: 16px !important;
        }

        .user-menu-list {
          display: none !important;
          position: absolute !important;
          top: 100% !important;
          right: 24px !important;
          min-width: 160px !important;
          padding: 8px 0 !important;
          margin: 0 !important;
          pointer-events: auto !important;
          background-color: var(--${PROJECT_PREFIX}-theme-navbar-dropdown-bg) !important;
          border-radius: 4px !important;
          z-index: 1001 !important;
          
          /* TODO: 未生效 */
          &.${BodyClasses.IS_EXPANDED} {
            @media (max-width: 768px) {
              display: block !important;
            }
          }

          .user-menu-item {
            margin: 0 !important;
            color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
            font-size: 14px !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            list-style: none !important;

            &:hover {
              background-color: var(--${PROJECT_PREFIX}-theme-navbar-dropdown-hover-bg) !important;
              color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
            }
            
            .user-menu-link {
              display: block !important;
              padding: 8px 16px !important;
              ${StylesService.getInstance().link.navbar}
            }
          }
        }
        
        &:hover .user-menu-list,
        .user-menu-list:hover {
          display: block !important;
          
          @media (max-width: 768px) {
             display: none !important;
          }
        }
      }
      
      /* 折叠按钮样式 */
      .navbar-collapse-toggle {
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border: none !important;
        border-radius: 6px !important;
        background-color: transparent !important;
        cursor: pointer !important;
        margin-left: 16px !important;
        transform: rotate(180deg) !important;
        
        @media (max-width: 768px) {
          display: none !important;
        }

        .collapse-toggle-icon {
          width: 24px !important;
          height: 24px !important;
          object-fit: contain !important;
        }
      }
    }
    
    /* 移动端菜单切换按钮 */
    .mobile-menu-toggle {
      display: none !important;
      align-items: center !important;
      justify-content: center !important;
      width: 40px !important;
      height: 40px !important;
      border: none !important;
      background-color: transparent !important;
      cursor: pointer !important;

      @media (max-width: 768px) {
         display: flex !important;
      }

      .toggle-icon {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
        transition: transform 0.3s ease !important;
      }
   }
  `
}
